<template>
	<view class="app">
		<view class="header">
			<view class="head_img" v-show="show">
				<img class="img" src="https://img2.baidu.com/it/u=72729450,1015217262&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" alt="" />
				<p>{{this.data.username}}</p>
			</view>
			
			<view class="deng" v-show="!show" @click="handleLogin" >
				尚未登录，请登录！
			</view>
		</view>
		
		<view class="info">
			<view class="uesr">
				<view class="title">
					账户信息
				</view>
				<view class="jiao">
					>
				</view>
			</view>
			<view class="tui">
				<view class="title">
					推给微信好友
				</view>
				<view class="jiao">
					>
				</view>
			</view>
			<view class="dao">
				<view class="title">
					导入微信文件位置
				</view>
				<view class="jiao">
					>
				</view>
			</view>
		</view>
		
		<view class="tuis" @click="handleUnlogin">
			<button type="info">退出登录</button>
		</view>
	</view>
	
</template>

<script>
	
	export default{
		data (){
			return {
				show: "",
				data: [],
			}
		},
		
		methods:{
			handleLogin(){
				uni.navigateTo({
					url:'/pages/login/login',
					animationType: "zoom-out",
					animationDuration: 2000,
				})
			}, 
			
			handleUnlogin(){
				this.show = ""
				uni.clearStorage()
			},
			
			getData(){
				let that = this
				uni.getStorage({
					key:"data",
					success(res) {
						that.data = res.data
						that.show = res.data.username
					}
				})
			},
		},
		
		onLoad() {
			this.getData()
		},
		
		
	}
	
</script>

<style lang="less">
	.app{
		width: 100%;
		height: 100vh;
		background: rgb(241, 241, 241);
		.header{
			width: 100%;
			height: 350rpx;
			background: white;
			.head_img{
				width: 150rpx;
				height: 150rpx;
				position: relative;
				left: 50%;
				top: 40%;
				transform: translate(-50%, -50%);
				.img{
					width: 100%;
					height: 100%;
					border-radius: 75rpx; 
				}
				p{
					text-align: center;
					margin-top: 15rpx;
					font-weight: 600;
				}
			}
			.deng{
				text-align: center;
				line-height: 350rpx;
				font-size: 40rpx;
				font-weight: 600;
			}
		}
		
		.info{
			width: 100%;
			display: flex;
			margin-top: 20rpx;
			background: white;
			flex-wrap: wrap;
			
		}
		.info view{
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			padding-left: 20rpx;
			border: 1rpx gainsboro solid;
			cursor: pointer;
			display: flex;
			.title{
				width: 90%;
				padding: 0;
				border: 0;
			}
			.jiao{
				padding: 0;
				border: 0;
				width: 10%;
				color: rgb(201, 201, 201);
			}
		}
		
		.tuis{
			margin-top: 30%;
		}
	}
	
</style>
